<template>
	<view class="mine-content">
		<view class="user-block">
			<image mode="aspectFill" :src="user.avatar_url?user.avatar_url:'/static/mine/user_photo.png'" class="user-photo"></image>
			<view v-if="user.nick_name" class="user-name">{{user.nick_name}}</view>
			<button v-else open-type="getPhoneNumber" hover-class="none" @getphonenumber="handleLogin" class="user-name">立即登录</button>
		</view>
		<view class="menu-block">
			<view @click="navigate('/pages/mine/profile')" class="menu-item">
				<view style="color: #2DCEC9;" class="iconfont icon-Information"></view>
				<view class="menu-name">我的资料</view>
				<view class="iconfont icon-youjiantou"></view>
			</view>
			<!-- <view @click="navigate()" class="menu-item">
				<view style="color: #FF9F2E;" class="iconfont icon-tousuzixun"></view>
				<view class="menu-name">我的投诉</view>
				<view class="iconfont icon-youjiantou"></view>
			</view>
			<view @click="navigate()" class="menu-item">
				<view style="color: #6BB3FF;" class="iconfont icon-tousujianyi"></view>
				<view class="menu-name">我的建议</view>
				<view class="iconfont icon-youjiantou"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {getStorage, setStorage} from '@/util/auth.js';
	import {wxLogin,getSelfInfo} from '@/api/user.js'
	export default{
		data(){
			return{
				user:null,
			}
		},
		methods:{
			navigate(url){
				const login=getStorage('login');
				if(!login.user){
					this.utils.showToast('请先登录');
					return;
				}
				uni.navigateTo({url})
			},
			handleLogin(phoneRes){
				if(!phoneRes.detail.code){
					this.utils.showToast('用户拒绝授权！');
					return;
				}
				const phoneCode=phoneRes.detail.code;
				wx.login({
					success:(login)=>{
						const loginCode=login.code;
						uni.showLoading({
							title:'加载中',
							mask:true
						})
						wxLogin({phoneCode,loginCode}).then((res)=>{
							uni.hideLoading();
							if(res.status==1){
								const data=res.data;
								setStorage('login',{token:data.token},data.expire);
								this.getUser();
							}else{
								this.utils.showToast(res.message);
							}
						}).catch((res)=>{
							uni.hideLoading()
							this.utils.showToast('登录失败！');
						})
					}
				})
			},
			getUser(){
				uni.showLoading({
					title:'获取中',
					mask:true,
				})
				getSelfInfo().then((res)=>{
					uni.hideLoading()
					if(res.status==1){
						const data=res.data;
						if(data.nick_name){
							let oldLogin=getStorage('login');
							oldLogin.user=data;
							setStorage('login',oldLogin);
							this.user=data;
							this.utils.showToast('操作成功');
						}else{
							this.utils.showToast('您还未完善资料，请先完善资料',()=>{
								uni.navigateTo({url:'/pages/mine/profile'});
							});
						}
					}else{
						this.utils.showToast(res.message);
					}
				}).catch((res)=>{
					console.log(res);
					uni.hideLoading()
					this.utils.showToast('登录失败！');
				})
			}
		},
		onShow() {
			let loginInfo=getStorage('login');
			if(loginInfo.user){
				this.user=loginInfo.user;
			}
		},
		onLoad() {
			uni.$on('loginEvent',()=>{
				this.getUser();
			})
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-image: linear-gradient(#C5FFFE,#fff,#fff);
	}
	.mine-content{
		padding: 50rpx;
		display: flex;
		flex-direction: column;
		.user-block{
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.user-photo{
				width: 160rpx;
				height: 160rpx;
				border-radius: 100%;
				margin-right: 30rpx;
			}
			.user-name{
				font-size: 36rpx;
				font-weight: bold;
				background: none;
				margin: 0;
				border-radius: 0;
				line-height: normal;
				padding: 0;
			}
		}
		.menu-block{
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			.menu-item{
				margin: 40rpx 0;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.iconfont{
					width: 40rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42rpx;
				}
				.menu-name{
					width: calc(100% - 100rpx);
					font-size: 30rpx;
					font-weight: bold;
					margin:0 20rpx;
				}
				.iconfont.icon-youjiantou{
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}
</style>